<template>
    <!--商品查询-->
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="商品名称:">
            <el-input v-model="formData.pname" placeholder="请输入商品名称" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="danger" @click="onDelete">批量删除</el-button>
        </el-form-item>
    </el-form>
    <!--商品列表-->
    <el-table :data="productData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="60" />
        <el-table-column prop="pname" label="商品名称" width="220" />
        <el-table-column prop="imgurl" label="商品图片" width="90" >
            <template #default="scope">
                <img :src="scope.row.imgurl" alt="" width="60" height="60">
            </template>
        </el-table-column>
        <el-table-column prop="oldprice" label="商品原价" width="90" />
        <el-table-column prop="newprice" label="商品现价" width="90" />
        <el-table-column prop="color" label="商品颜色" width="90" />
        <el-table-column prop="size" label="商品尺寸" width="190" />
        <el-table-column prop="count" label="商品库存" width="90" />
        <el-table-column prop="status" label="商品状态" width="90" />
        <el-table-column prop="category_id" label="父目录ID" width="90" />

        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button type="danger" size="small" @click="handleClick(scope.row.id)">
                    下线
                </el-button>
                <el-button type="primary" size="small" @click="editClick(scope.row.id)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页查询-->
     <el-pagination
      v-model:current-page="productPage.pageNum"
      v-model:page-size="productPage.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script setup>

import { ref } from 'vue';
import request from '../../utils/request';
const productData = ref()

const formData = ref({
    pname: ''
})
const total =ref(0)
const productPage = ref({
    query: '',
    pageNum: 1,
    pageSize: 3
})

const callProductApi = async ()=>{
    //   let res = await request.get("product/testproduct")
    
      let res =await request.post("product/search",productPage.value)
       console.log(res);

      productData.value = res.data.productAll
      total.value =res.data.total
}

callProductApi()
const onSubmit = () => {

}
const onDelete = () => {

}


const handleClick = () => {
    console.log(id);

}

const editClick = (id) => {
    console.log(id);

}
//页码选择
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  productPage.value.pageSize=val
  //数据从第一页开始
  productPage.value.pageNum=1
    callProductApi()
}

// 页码跳转
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  productPage.value.pageNum=val
  callProductApi()
}


</script>

<style  scoped>
.el-form{
    margin-top: 20px;
}
.el-table .cell{
    margin-top: 10px;
    text-align: center;
}
/* 靠右展示 */
.el-pagination{
    float: right;
    margin-top: 13px;
}
</style>